import React, { useEffect } from 'react';
import styles from './index.less';
import { Form, Input, Checkbox } from 'antd';
import { connect } from 'umi';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};

const names = {
  name1: 'roleName',
  name2: 'authName',
};

var RoleCount = props => {
  const [form] = Form.useForm();

  var { roleVisibledrawerType, roleId } = props.Role;

  //根据id查询角色信息
  var getRoleInfoById = async () => {
    var rs = await props.dispatch({
      type: 'Role/getRoleInfoById',
      payload: { id: roleId },
    });
    if (rs.success) {
      var result = [];
      result = rs.data.authVoList.map((item, i) => {
        return (result[i] = item.id);
      });
      var data = {
        roleName: rs.data.roleName,
        authName: result,
      };
      form.setFieldsValue(data);
    }
  };

  useEffect(() => {
    if (props.init) props.init(form);
    if (roleVisibledrawerType != 'add') {
      getRoleInfoById();
    }
  });

  var { roleAuthList } = props.Role;

  return (
    <div>
   
        <Form {...formItemLayout} form={form}>
          <Form.Item
            name={names.name1}
            label="角色名称"
            rules={[{ required: true, message: '请输入角色名称' }]}
          >
            <Input placeholder="请输入角色名称" />
          </Form.Item>

          <div className={styles.authCont}>
            <Form.Item
              label="功能操作权限"
              name={names.name2}
              rules={[{ required: true, message: '请选择操作权限' }]}
            >
              <Checkbox.Group
                options={roleAuthList.map(item => {
                  return {
                    label: item.name,
                    value: item.id,
                  };
                })}
              />
            </Form.Item>
          </div>
        </Form>
    
    </div>
  );
};

export default connect(({ Role }) => ({ Role }))(RoleCount);
